﻿<template>
    <div class="table">
        <div  class="divSearch">
            <Row>
            <!--搜索框-->
                <Col v-show="userinfo.AreaCode=='530000000000'">
                    <label class="searchLabel">所属地区:</label>
                    <!-- <Cascader :data="AreaList" change-on-select @on-change='SearchCascaderChange'  class="searchInput"></Cascader>-->
                    <Select v-model="searchModel.AreaCode"  placeholder="请选择..."  @on-change="getStatsData()" class="searchInput">
                        <Option :value="userinfo.AreaCode" v-if="userinfo.AreaCode=='530000000000'">全&nbsp;&nbsp;省</Option>
                        <Option :value="userinfo.AreaCode" v-else>全市/州</Option>
                        <Option :value="item.value" v-for="item in AreaList" :key="item.value">{{item.label}}</Option>
                    </Select>
                </Col>
                <Col v-show="searchModel.AreaCode=='530000000000'">
                    <label class="searchLabel">是否包含县（市、区）:</label>
                    <!-- <Cascader :data="AreaList" change-on-select @on-change='SearchCascaderChange'  class="searchInput"></Cascader>-->
                    <Select v-model="searchModel.IsCity"  @on-change="getStatsData()" class="searchInput">
                        <Option value="1">否</Option>
                        <Option value="2">是</Option>
                    </Select>
                </Col>
                <Col>
                    <label class="searchLabel">填报年度:</label>
                    <Select v-model="searchModel.FillInYear" placeholder="请选择..." :label-in-value="true" @on-change="getStatsData" clearable class="searchInput">
                        <Option :value="item.DictText" v-for="item in CreateYearList" :key="item.DictValue">{{item.DictText}}</Option>
                    </Select>
                </Col>
                <!-- <Col>
                    <label class="searchLabel">桑园用途:</label>
                    <Select v-model="Option"  placeholder="请选择..." :label-in-value="true" clearable class="searchInput" width="200" @on-change="GetData">
                        <Option :value="item.value" v-for="item in Options" :key="item.value">{{item.name}}</Option>
                    </Select>
                </Col> -->
                <Col >
                    <Button type="primary" @click="DataExport()"  class="searchRight" icon="log-out" >数据导出</Button>
                    <RadioGroup v-model="CheckButton" @on-change="changeButton" type="button" class="searchRight" >
                        <Radio label="listShow" title="列表"><span class="totalLable"><Icon type="ios-list-outline" size="10"></Icon>&nbsp;列表</span></Radio>
                        <Radio label="barShow" title="柱状图"><span class="totalLable"><Icon type="stats-bars" size="10"></Icon>&nbsp;柱状图</span></Radio>   
                        <Radio label="mapShow" title="地图"><span class="totalLable"><Icon type="map" size="10"></Icon>&nbsp;地图</span></Radio>                                                                               
                        <Radio label="timeShow" title="历年统计图"><span class="totalLable"><Icon type="ios-pulse-strong" size="10"></Icon>&nbsp;时间趋势图</span></Radio>                                                                               
                    </RadioGroup>    
                </Col>
            </Row>
        </div>
        <Row  v-show="listShow">
            <!-- 列表-->
            <Col>
                <table class="ContentTable">
                    <caption>
                        <div><span class="tableNum">表6——{{searchModel.FillInYear}}{{userinfo.AreaCode|omgAreaName}}桑园套种农作物情况调查表</span>
                            <span class="tip">单位：亩、万元</span>
                        </div>
                    </caption>
                    <thead>
                        <tr>
                            <th rowspan="2" style="width:50px;">序号</th>
                            <!-- <th rowspan="2" style="width:72px;">年份</th> -->
                            <th rowspan="2" style="width:100px;">县（市、区）</th>
                            <th rowspan="2">总面积</th>
                            <th rowspan="2">总产值</th>
                            <th colspan="2">马铃薯</th>
                            <th colspan="2">大豆</th>
                            <th colspan="2">蚕豆</th>
                            <th colspan="2">辣椒</th>
                            <th colspan="2">豌豆</th>
                            <th colspan="2">花菜</th>
                            <th colspan="2">其它</th>
                        </tr>
                        <tr>
                            <th>面积</th>
                            <th>产值</th>
                            <th>面积</th>
                            <th>产值</th>
                            <th>面积</th>
                            <th>产值</th>
                            <th>面积</th>
                            <th>产值</th>
                            <th>面积</th>
                            <th>产值</th>
                            <th>面积</th>
                            <th>产值</th>
                            <th>面积</th>
                            <th>产值</th>
                        </tr>
                        <tr v-if="datas.length>0">
                            <td style="width:20px;">{{1}}</td>
                            <!-- <td style="width:72px;">{{datas[0].year}}</td> -->
                            <td style="width:100px;">{{datas[0].AreaName}}</td>
                            <td>{{datas[0].TotalArea|decimal|formatCurrency}}</td>
                            <td>{{datas[0].TotalProduct|decimal|formatCurrency}}</td>
                            <td>{{datas[0].MLSMJ|decimal|formatCurrency}}</td>
                            <td>{{datas[0].MLSCZ|decimal|formatCurrency}}</td>
                            <td>{{datas[0].DDMJ|decimal|formatCurrency}}</td>
                            <td>{{datas[0].DDCZ|decimal|formatCurrency}}</td>
                            <td>{{datas[0].CDMJ|decimal|formatCurrency}}</td>
                            <td>{{datas[0].CDCZ|decimal|formatCurrency}}</td>
                            <td>{{datas[0].LJMJ|decimal|formatCurrency}}</td>
                            <td>{{datas[0].LJCZ|decimal|formatCurrency}}</td>
                            <td>{{datas[0].WDMJ|decimal|formatCurrency}}</td>
                            <td>{{datas[0].WDCZ|decimal|formatCurrency}}</td>
                            <td>{{datas[0].HCMJ|decimal|formatCurrency}}</td>
                            <td>{{datas[0].HCCZ|decimal|formatCurrency}}</td>
                            <td>{{datas[0].QTMJ|decimal|formatCurrency}}</td>
                            <td>{{datas[0].QTCZ|decimal|formatCurrency}}</td>
                        </tr>
                    </thead>
                    <tbody v-if="datas.length>0">
                        <tr v-for="(item,index) in datas"  v-show="index!==0" :key="item.year" :class="{ td1:index%2!=0,red:AutoCity(item.AreaCode)}">
                            <td style="width:50px;">{{index+1}}</td>
                            <!-- <td style="width:72px;">{{item.year}}</td> -->
                            <td style="width:100px;">{{item.AreaName}}</td>
                            <td>{{item.TotalArea|decimal|formatCurrency}}</td>
                            <td>{{item.TotalProduct|decimal|formatCurrency}}</td>
                            <td>{{item.MLSMJ|decimal|formatCurrency}}</td>
                            <td>{{item.MLSCZ|decimal|formatCurrency}}</td>
                            <td>{{item.DDMJ|decimal|formatCurrency}}</td>
                            <td>{{item.DDCZ|decimal|formatCurrency}}</td>
                            <td>{{item.CDMJ|decimal|formatCurrency}}</td>
                            <td>{{item.CDCZ|decimal|formatCurrency}}</td>
                            <td>{{item.LJMJ|decimal|formatCurrency}}</td>
                            <td>{{item.LJCZ|decimal|formatCurrency}}</td>
                            <td>{{item.WDMJ|decimal|formatCurrency}}</td>
                            <td>{{item.WDCZ|decimal|formatCurrency}}</td>
                            <td>{{item.HCMJ|decimal|formatCurrency}}</td>
                            <td>{{item.HCCZ|decimal|formatCurrency}}</td>
                            <td>{{item.QTMJ|decimal|formatCurrency}}</td>
                            <td>{{item.QTCZ|decimal|formatCurrency}}</td>
                        </tr>
                    </tbody>
                </table>
            </Col>
         </Row>
         <Row v-show="barShow">
            <!--饼图-->
            <div  id="divBar" style="margin-right:10px;border:1px solid #D7DDE4; ">柱状图</div>
        </Row>
        <Row  v-show="mapShow">
            <!--地图展示-->
            <div id="divMap"  style="margin-right:10px;border:1px solid #D7DDE4; ">地图</div>
        </Row>
        <Row  v-show="timeShow">
            <!--时间趋势图-->
            <div id="divTime">时间趋势图</div>
        </Row>
    </div>
</template>
<script>
export default {
  data() {
    return {
      self: this,
      CreateYearList: this.GetGroupDict("ReportYear"), //年度
      CurrentYear: this.GetCurrentYear(), //当前年度
      AreaList: this.SearchAreaList(this.GetlocaStorage("CSuserinfo").AreaCode),
      CurrentAreaName: "",
      userinfo: this.GetlocaStorage("CSuserinfo"), //获取当前用户信息
      CheckButton: "listShow",
      pieLegendData: [], //饼图选择项
      datas: [], //列表数据
      StatsData: [], //地区-汇总数据

      echartsItem:['马铃薯重量','马铃薯产量','大豆重量','大豆产量','蚕豆重量','蚕豆产量',
      '辣椒重量','辣椒产量',
      '豌豆重量','豌豆产量',
      '花菜重量','花菜产量',
      '其他重量','其他产量'],  
      AreaData:[],
      //柱状图数据
      MLSMJData:[],MLSCZData:[],DDMJData:[],DDCZData:[],
      CDMJData:[],CDCZData:[],LJMJData:[],LJCZData:[],
      WDMJData:[],WDCZData:[],HCMJData:[],HCCZData:[],
      QTMJData:[],QTCZData:[],
      barList:[],
      //地图数据
      mapType:'',//当前加载的地图模板
      GeoData:'',//top值 
      mapList:[],
      MapMLSMJData:[],MapMLSCZData:[],MapDDMJData:[],MapDDCZData:[],
      MapCDMJData:[],MapCDCZData:[],MapLJMJData:[],MapLJCZData:[],
      MapWDMJData:[],MapWDCZData:[],MapHCMJData:[],MapHCCZData:[],
      MapQTMJData:[],MapQTCZData:[],
      mapList:[],
      //查询模型：根据需求删除不不要查询条件
      //蔬菜生产情况表代码
      searchModel: {
        Id: "",
        ReportCode: "MulAnnualProducStatist",
        FillInYear: "",
        TimesType: "",
        IsCity: "1",
        AreaCode: this.GetlocaStorage("CSuserinfo").AreaCode,
        PageNumber: 1,
        PageSize: 20,
        Status: "4",
        Opinion: ""
      },
      clientHeight: window.innerHeight - 240, //表格默认高度
      listShow: true, //列表显示控制器
      barShow: false, //饼图显示控制器
      mapShow: false, //地图显示控制器
      timeShow:false,//时间趋势图显示控制器
       XData:[]//时间轴
    };
  },
  //高度计算
  mounted() {
    //table高度计算方法
    const that = this;
    window.onresize = () => {
      return (() => {
        that.clientHeight = window.innerHeight - 240;
      })();
    };
    //  this.showMap();
  },
  //方法
  methods: {
    //展示切换
    changeButton:function(n){
        if(n=="listShow")
        {
            this.listShow=true;//显示列表
            this.barShow=false;
            this.mapShow=false;
            this.timeShow=false;
        }
        else if(n=="barShow")
        {
            this.listShow=false;
            this.barShow=true;//显示柱状图
            this.mapShow=false;
            this.timeShow=false;
        }
          else if(n=="mapShow")
        {
            this.listShow=false;
            this.barShow=false;//显示地图
            this.mapShow=true;
            this.timeShow=false;
        }
        else if(n=="timeShow")
        {
            this.listShow=false;
            this.barShow=false;//显示时间趋势图
            this.mapShow=false;
            this.timeShow=true;
        }
        else{
              this.listShow=true;//默认显示列表
              this.barShow=false;
              this.mapShow=false;
              this.timeShow=false;
        }
    },
    //获取地区统计数据
    getStatsData() {
      var self = this;
      var user = self.GetlocaStorage("CSuserinfo");
      if (
        self.searchModel.FillInYear != null &&
        self.searchModel.FillInYear != ""
      ) {
        self.searchModel.FillInYear = self.searchModel.FillInYear; //获取当前系统年份
      } else {
        self.searchModel.FillInYear = self.CurrentYear + "年"; //获取填报年度-----数据字典值
      }
      
      //柱状图数据
      self.AreaData=[],
      self.MLSMJData=[],self.MLSCZData=[],self.DDMJData=[],self.DDCZData=[],
      self.CDMJData=[],self.CDCZData=[],self.LJMJData=[],self.LJCZData=[],
      self.WDMJData=[],self.WDCZData=[],self.HCMJData=[],self.HCCZData=[],
      self.QTMJData=[],self.QTCZData=[],
      self.barList=[],
      //地图数据
      self.mapList=[],
      self.MapMLSMJData=[],self.MapMLSCZData=[],self.MapDDMJData=[],self.MapDDCZData=[],
      self.MapCDMJData=[],self.MapCDCZData=[],self.MapLJMJData=[],self.MapLJCZData=[],
      self.MapWDMJData=[],self.MapWDCZData=[],self.MapHCMJData=[],self.MapHCCZData=[],
      self.MapQTMJData=[],self.MapQTCZData=[],
      self.mapType=self.searchModel.AreaCode;
      self.GeoData=self.GetGeoData(self.mapType);
      self.$http.post("MulInterCrops/PostStatsList", self.searchModel).then(function(res) {
          if (res.data.status === 1) {
            if (res.data.model != null) {
              self.datas = res.data.model; //列表赋值
              self.CurrentAreaName = res.data.model[0].AreaName; //当前州(市)或者省
              for(var i=1;i<res.data.model.length;i++)
              {
                //柱状图数据
                self.AreaData.push(res.data.model[i].AreaName);
                self.MLSMJData.push(res.data.model[i].MLSMJ);self.MLSCZData.push(res.data.model[i].MLSCZ);
                self.DDMJData.push(res.data.model[i].DDMJ);self.DDCZData.push(res.data.model[i].DDCZ);
                self.CDMJData.push(res.data.model[i].CDMJ);self.CDCZData.push(res.data.model[i].CDCZ);
                self.LJMJData.push(res.data.model[i].LJMJ);self.LJCZData.push(res.data.model[i].LJCZ);
                self.WDMJData.push(res.data.model[i].WDMJ);self.WDCZData.push(res.data.model[i].WDCZ);
                self.HCMJData.push(res.data.model[i].HCMJ);self.HCCZData.push(res.data.model[i].HCCZ);
                self.QTMJData.push(res.data.model[i].QTMJ);self.QTCZData.push(res.data.model[i].QTCZ);
                //地图数据
                self.MapMLSMJData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].MLSMJ});
                self.MapMLSCZData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].MLSCZ});
                self.MapDDMJData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].DDMJ});
                self.MapDDCZData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].DDCZ});
                self.MapCDMJData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].CDMJ});
                self.MapCDCZData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].CDCZ});
                self.MapLJMJData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].LJMJ});
                self.MapLJCZData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].LJCZ});
                self.MapWDMJData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].WDMJ});
                self.MapWDCZData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].WDCZ});
                self.MapHCMJData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].HCMJ});
                self.MapHCCZData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].HCCZ});
                self.MapQTMJData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].QTMJ});
                self.MapQTCZData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].QTCZ});
              }
              self.barList.push(self.MLSMJData,self.MLSCZData,self.DDMJData,self.DDCZData,self.CDMJData,self.CDCZData,self.LJMJData,self.LJCZData);
              self.barList.push(self.WDMJData,self.WDCZData,self.HCMJData,self.HCCZData,self.QTMJData,self.QTCZData);
              self.mapList.push(self.MapMLSMJData,self.MapMLSCZData,self.MapDDMJData,self.MapDDCZData,self.MapCDMJData,self.MapCDCZData,self.MapLJMJData,self.MapLJCZData);
              self.mapList.push(self.MapWDMJData,self.MapWDCZData,self.MapHCMJData,self.MapHCCZData,self.MapQTMJData,self.MapQTCZData);

              self.showEcharts(); 
                self.getStatsByTime();
            }
          } 
          else {
            self.$Modal.error({
              title: "提示信息",
              content: res.data.message
            });
          }
      });
      if (self.searchModel.IsCity != "1") {
        self.$http.post("MulInterCrops/PostStatsDetailList", self.searchModel).then(function(res) {
            if (res.data.status === 1) {
              if (res.data.model != null) {
                self.datas = res.data.model; //列表赋值
              } 
            } else {
              self.$Modal.error({
                title: "提示信息",
                content: res.data.message
              });
            }
          });
      }
    },
    getStatsByTime(){//获取时间趋势统计数据
        var self=this;
        self.listTime=[];
        self.XData=[];
        self.$http.post('MulInterCrops/PostStatsTimeList', self.searchModel).then(function (res) {
            if(res.data.status===1)
            {
                //按年份对数据进行归类
                if(res.data.model.length>0)
                {
                    var array = new Array();
                    array[0]=[];array[1]=[];array[2]=[];array[3]=[];array[4]=[];
                    array[5]=[];array[6]=[];array[7]=[];array[8]=[];array[9]=[];array[10]=[];
                    array[11]=[];array[12]=[];array[13]=[];array[14]=[];
                    for(var i=0;i<res.data.model.length;i++)
                    {   self.XData.push(res.data.model[i].year)
                        array[0].push(res.data.model[i].MLSMJ==null||''?0:res.data.model[i].MLSMJ);
                        array[1].push(res.data.model[i].MLSCZ==null||''?0:res.data.model[i].MLSCZ);
                        array[2].push(res.data.model[i].DDMJ==null||''?0:res.data.model[i].DDMJ);
                        array[3].push(res.data.model[i].DDCZ==null||''?0:res.data.model[i].DDCZ);
                        array[4].push(res.data.model[i].CDMJ==null||''?0:res.data.model[i].CDMJ);
                        // array[5].push(res.data.model[i].CDMJ==null||''?0:res.data.model[i].CDMJ);
                        array[5].push(res.data.model[i].CDCZ==null||''?0:res.data.model[i].CDCZ);
                        array[6].push(res.data.model[i].LJMJ==null||''?0:res.data.model[i].LJMJ); 
                        array[7].push(res.data.model[i].LJCZ==null||''?0:res.data.model[i].LJCZ); 
                        array[8].push(res.data.model[i].WDMJ==null||''?0:res.data.model[i].WDMJ); 
                        array[9].push(res.data.model[i].WDCZ==null||''?0:res.data.model[i].WDCZ); 
                        array[10].push(res.data.model[i].HCMJ==null||''?0:res.data.model[i].HCMJ); 
                        array[11].push(res.data.model[i].HCCZ==null||''?0:res.data.model[i].HCCZ); 
                        array[12].push(res.data.model[i].QTMJ==null||''?0:res.data.model[i].QTMJ); 
                        array[13].push(res.data.model[i].QTCZ==null||''?0:res.data.model[i].QTCZ); 
                    }
                        self.listTime.push(array[0],array[1],array[2],array[3],array[4],array[5]);
                    self.listTime.push(array[6],array[7],array[8],array[9],array[10],array[11]);
                    self.listTime.push(array[12],array[13]);
                    self.getTimeTrendStats();
                }
                else{
                    self.$Modal.warning({
                        title: '提示信息',
                        content: "时间趋势统计数据为空"
                    });
                }
            }
            else if(res.data.status===0)
            {
                self.$Modal.warning({
                    title: '提示信息',
                    content: res.data.message
                });
            }
            else{
                self.$Modal.error({
                    title: '提示信息',
                    content: res.data.message
                });
            }
        });
    },
    getTimeTrendStats(){//展示时间趋势统计图
        //************************显示时间趋势图
        var self=this;
        var container=document.getElementById('divTime');
        var containerTable=document.getElementsByClassName('ivu-col ivu-col-span-4');
        // //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
        var resizeContainer = function () {
            container.style.width = (window.innerWidth- containerTable[0].clientWidth-40)+'px';
            container.style.height = (window.innerHeight-240)+'px';
        };
        //设置容器高宽
        resizeContainer();
        var myDiv = myEcharts.init(container, 'shine');
        var TableName='表6——'+self.CurrentAreaName+'桑园套种农作物情况历年统计图';
        var option = self.GetTimeOption(TableName,self.XData,self.echartsItem, self.listTime,'line');
        myDiv.setOption(option);
        window.onresize = function () {
            //重置容器高宽
            resizeContainer();
            myDiv.resize();
        };
    },
    AutoCity(AreaCode) {
      var result = false;
      if (
        AreaCode != null &&
        AreaCode != "" &&
        this.searchModel.IsCity == "2"
      ) {
        if (AreaCode.substr(4, 2) == "00") {
          result = true;
        }
      }
      return result;
    },
    DataExport() {
      //导出
      var self = this;
      var user = self.GetlocaStorage("CSuserinfo");
      if (
        self.searchModel.FillInYear != null &&
        self.searchModel.FillInYear != ""
      ) {
        self.searchModel.FillInYear = self.searchModel.FillInYear; //获取当前系统年份
      } else {
        self.searchModel.FillInYear = self.CurrentYear + "年"; //获取填报年度-----数据字典值
      }
      window.open(
        this.$http.defaults.baseURL +
          "MulInterCrops/GetStatsExcelData?FillInYear=" +
          self.searchModel.FillInYear +
          "&&AreaCode=" +
          self.searchModel.AreaCode +
          "&&Status=" +
          self.searchModel.Status
      );
    },
     //展示柱状图和地图代码
    showEcharts(){
          //************************显示柱状图
        var self=this;
        var containerBar=document.getElementById('divBar');
        var containerTable=document.getElementsByClassName('ivu-col ivu-col-span-4');
        // //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
        var resizeContainerBar = function () {
            containerBar.style.width = (window.innerWidth- containerTable[0].clientWidth-40)+'px';
            containerBar.style.height = (window.innerHeight-240)+'px';
        };
        //设置容器高宽
        resizeContainerBar();
        var myBar = myEcharts.init(containerBar, 'shine');
        var BarName='表6——'+self.searchModel.FillInYear+self.CurrentAreaName+'桑园套种农作物情况柱状统计图';
        var optionBar = self.GetBarOption(BarName,self.AreaData,self.echartsItem,self.barList,'bar');
        myBar.setOption(optionBar);
        //柱状图展示完
          //******************显示地图
        var containerMap=document.getElementById('divMap');
        var containerTable=document.getElementsByClassName('ivu-col ivu-col-span-4');
        // //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
        var resizeContainerMap = function () {
            //containerTable[0].clientWidth 左侧菜单栏的宽度
            containerMap.style.width = (window.innerWidth- containerTable[0].clientWidth-40)+'px';
            containerMap.style.height = (window.innerHeight-260)+'px';
        };
        //geo数据完
        //设置容器高宽
        resizeContainerMap();
        var myMap = myEcharts.init(containerMap, 'shine');
        var MapName='表6——'+self.searchModel.FillInYear+self.CurrentAreaName+'桑园套种农作物情况统计地区分布图';
        var optionMap = self.GetMapOption(MapName,self.GeoData,self.mapType,self.echartsItem,self.mapList);
        myMap.setOption(optionMap);
        //用于使chart自适应高度和宽度
        window.onresize = function () {
            //重置容器高宽
            resizeContainerBar();
            resizeContainerMap();
            myMap.resize();
            myBar.resize();
        };
    }
  },
  //创建Vue页面方法
  created: function() {
    this.SearchAreaList(); //获取地区统计数据
    this.getStatsData(); //获取地区统计数据
  },
  watch: {
    //需要监听的在此处新增监听对象
  }
};
</script>
<style scoped src="../../styles/stats.css"></style>
